<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tab标签选项卡切换jQuery特效 - 站长素材</title>
<style>
*{ margin:0; padding:0; list-style:none;}
body{ font-size:12px; color:#666; text-align:left;}
h1{ text-align:center;}

.zzsc{ width:500px; height:200px; margin:100px auto; background:#f0f0f0; font-family:'微软雅黑';}
.zzsc .tab{ overflow:hidden; background:#ccc;}
.zzsc .tab a{ display:block; padding:10px 20px; float:left; text-decoration:none; color:#333;}
.zzsc .tab a:hover{ background:#E64E3F; color:#fff; text-decoration:none;}
.zzsc .tab a.on{ background:#E64E3F; color:#fff; text-decoration:none;}
.zzsc .content{ overflow:hidden; padding:10px;}
.zzsc .content li{ display:none;}
</style>
</head>
<body>

<!-- 代码部分begin -->
<div class="zzsc">
	<div class="tab">
    	<a href="javascript:;" class="on">js特效</a>
        <a href="javascript:;">flash素材</a>
        <a href="javascript:;">亚当学院</a>
        <a href="javascript:;">在线客服代码</a>
    </div>
    <div class="content">
    	<ul>
        	<li style="display:block;">js特效内容</li>
            <li>flash素材内容</li>
            <li>亚当学院内容</li>
            <li>在线客服代码内容</li>
        </ul>
    </div>
</div>

<h1><a href="index.html">效果一</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="index2.html">效果二</a></h1>

<script src="js/jquery-1.8.3.min.js"></script>
<script>
$(function(){
	$(".zzsc .tab a").mouseover(function(){
		$(this).addClass('on').siblings().removeClass('on');
		var index = $(this).index();
		number = index;
		$('.zzsc .content li').hide();
		$('.zzsc .content li:eq('+index+')').show();
	});
	
	var auto = 1;  //等于1则自动切换，其他任意数字则不自动切换
	if(auto ==1){
		var number = 0;
		var maxNumber = $('.zzsc .tab a').length;
		function autotab(){
			number++;
			number == maxNumber? number = 0 : number;
			$('.zzsc .tab a:eq('+number+')').addClass('on').siblings().removeClass('on');
			$('.zzsc .content ul li:eq('+number+')').show().siblings().hide();
		}
		var tabChange = setInterval(autotab,3000);
		//鼠标悬停暂停切换
		$('.zzsc').mouseover(function(){
			clearInterval(tabChange);
		});
		$('.zzsc').mouseout(function(){
			tabChange = setInterval(autotab,3000);
		});
	  }
});
</script>
<!-- 代码部分end -->

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
<p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
</div>
</body>
</html>
